<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>蓝牌添加页面</title>
  <link rel="stylesheet" href="../../../yl/index.css" />
  <!-- 布局样式 -->
  <link rel="stylesheet" href="../../../yl/style.css" />
  <link rel="stylesheet" href="../../../style/wangeditor.css">
  <link rel="stylesheet" href="../../../yl/mobile.css" />
  <link rel="stylesheet" href="../../../yl/easyui.css" />
  <link rel="stylesheet" href="../../../yl/icon.css" />
</head>

<body>
  <!-- <div id="app"> -->
  <div class="easyui-navpanel" id="app" v-cloak>
    <header>
      <div class="m-toolbar">
        <div class="m-title">{{action=='Add'?'关联人员':action=='Modify'?'修改蓝牌信息':''}}</div>
      </div>
    </header>
    <div class="easyui-navpanel panel-body panel-body-nobottom panel-body-noborder" style="height: 3000px"
      id="MainTable"
      :data-options="JSON.stringify({ 'TableName': 'blue_plate_information', 'form': 'dataForm' ,'primary_key':'Blue_Plate_SerialNumber' })">
      <div class="yl-main">
        <div class="table_titel">
          <div class="titel">蓝牌信息</div>
        </div>
        <el-descriptions :column="2" size="large" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">蓝牌编号</div>
            </template>
            <el-input disabled v-model.trim="dataForm2.Blue_Plate_SerialNumber" class="borderless-input"
              placeholder="请输入蓝牌名称" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">蓝牌名称</div>
            </template>
            <el-input disabled v-model.trim="dataForm2.Blue_Plate_Name" class="borderless-input"
              placeholder="请输入蓝牌名称" />
          </el-descriptions-item>
          <el-descriptions-item v-if="dataForm2.Self_Built_Houses == '0'">
            <template #label>
              <div class="cell-item">户号</div>
            </template>
            <el-input disabled :value="dataForm1.Room_SerialNumber" class="borderless-input" placeholder="请输入户号" />
          </el-descriptions-item>
          <el-descriptions-item v-if="dataForm2.Self_Built_Houses == '0'">
            <template #label>
              <div class="cell-item">单元号</div>
            </template>
            <el-input disabled :value="dataForm1.Unit_Number + '号'" class="borderless-input" placeholder="请输入单元号" />
          </el-descriptions-item>
          <el-descriptions-item v-if="dataForm2.Self_Built_Houses == '0'">
            <template #label>
              <div class="cell-item">楼层</div>
            </template>
            <el-input disabled :value="dataForm1.Layer_Number+ '层'" class="borderless-input" placeholder="请输入楼层" />
          </el-descriptions-item>
          <el-descriptions-item v-if="dataForm2.Self_Built_Houses == '0'">
            <template #label>
              <div class="cell-item">门号</div>
            </template>
            <el-input disabled :value="dataForm1.Room_Number+ '号'" class="borderless-input" placeholder="请输入门号名称" />
          </el-descriptions-item>
          <el-descriptions-item v-if="dataForm2.Self_Built_Houses == '1'">
            <template #label>
              <div class="cell-item">是否为宅基地</div>
            </template>
            <el-input disabled value="是" class="borderless-input" placeholder="请输入门号名称" />
          </el-descriptions-item>
        </el-descriptions>
        <div class="table_titel">
          <div class="titel">户主绑定</div>
        </div>
        <el-form :model="{childDataForm1}" ref="form" :inline-message="true" style="width: 100%">
          <el-descriptions :column="2" size="large" border v-for="(item,index) in childDataForm1" :key="index">
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">户主</div>
              </template>
              <el-form-item :prop="'childDataForm1.'+ index +'.ID_Number'"
                :rules="[{ required: true, message: '请选择户主', trigger: 'change' }]">
                <!-- <el-select @change="handleHolder($event,item)" clearable v-model.trim="item.ID_Number" placeholder="请选择户主" filterable style="width: 100%">
                  <el-option v-for="(item,index) in personal" :key="index" :label="item.Personal_Name"
                    :value="item.ID_Card_Number"></el-option>
                </el-select> -->
                <yl-select @change="handleHolder($event,item)" v-model="item.ID_Number" clearable filterable placeholder="请选择户主" 
                    :options="personal" :props="{value:'ID_Card_Number',label:'Personal_Name'}">
                    <el-table-column prop="ID_Card_Number" width="180" show-overflow-tooltip label="身份证号"></el-table-column>
                    <el-table-column prop="Personal_Name" show-overflow-tooltip label="姓名"></el-table-column>
                    <el-table-column prop="Birthday" show-overflow-tooltip label="出生日期"></el-table-column>
                    <el-table-column prop="Gender" label="性别"></el-table-column>
                    <el-table-column prop="Nation" label="民族"></el-table-column>
                    <el-table-column prop="Registered_Residence" show-overflow-tooltip label="籍贯"></el-table-column>
                    <el-table-column prop="Contact_Phone" label="联系方式"></el-table-column>
                  </yl-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">产权证明</div>
              </template>
              <el-form-item :prop="'childDataForm1.'+ index +'.Ownership_Prove'">
                <yl-upload v-model="item.Ownership_Prove"></yl-upload>
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
        <div class="table_titel">
          <div class="titel">居住成员</div>
          <div class="operation">
            <el-button type="success" size="small" @click="skip">添加人口</el-button>
            <el-button type="primary" size="small" @click="handleAdd('childDataForm')">新增</el-button>
            <el-button type="danger" size="small" @click="handleRemove('childDataForm')">删除</el-button>
          </div>
        </div>
        <el-form :model="{childDataForm}" ref="form" :inline-message="true" style="width: 100%">
          <el-descriptions style="margin-bottom: 20px;" :column="2" size="large" border
            v-for="(item,index) in childDataForm.filter(item => item.Row_Status != '1')" :key="index">
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">居住成员</div>
              </template>
              <el-form-item :prop="'childDataForm.'+ index +'.ID_Number'" :rules="[{ required: true, message: '请选择居住成员', trigger: 'change' }]">
                <!-- <el-select clearable @change="handleIDNumber($event,item)" v-model.trim="item.ID_Number" placeholder="请选择居住成员" filterable style="width: 100%">
                  <el-option v-for="(item,index) in personal" :key="index" :label="item.Personal_Name"
                    :value="item.ID_Card_Number"></el-option>
                </el-select> -->
                <yl-select @change="handleIDNumber($event,item)" v-model="item.ID_Number" clearable filterable placeholder="请选择居住成员" 
                    :options="personal" :props="{value:'ID_Card_Number',label:'Personal_Name'}">
                    <el-table-column prop="ID_Card_Number" width="180" show-overflow-tooltip label="身份证号"></el-table-column>
                    <el-table-column prop="Personal_Name" show-overflow-tooltip label="姓名"></el-table-column>
                    <el-table-column prop="Birthday" show-overflow-tooltip label="出生日期"></el-table-column>
                    <el-table-column prop="Gender" label="性别"></el-table-column>
                    <el-table-column prop="Nation" label="民族"></el-table-column>
                    <el-table-column prop="Registered_Residence" show-overflow-tooltip label="籍贯"></el-table-column>
                    <el-table-column prop="Contact_Phone" label="联系方式"></el-table-column>
                  </yl-select>
              </el-form-item> 
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">与户主关系</div>
              </template>
              <el-form-item :prop="'childDataForm.'+ index +'.Relation_Type_SerialNumber'" :rules="[{ required: true, message: '请选择与户主关系', trigger: 'change' }]">
                <el-select @change="handleChange($event,item)" clearable v-model.trim="item.Relation_Type_SerialNumber"
                  placeholder="请选择与户主关系" filterable style="width: 100%">
                  <el-option v-for="(item,index) in relation.filter(i=>(childDataForm1[0].ID_Number == item.ID_Number&&childDataForm1[0].ID_Number?i.Relation_Type=='户主':i.Relation_Type!='户主'))"
                    :key="index" :label="item.Relation_Type" :value="item.Relation_Type_SerialNumber"></el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <!-- <el-descriptions-item>
            <template #label>
              <div class="cell-item">是否是户主</div>
            </template>
            <el-select disabled clearable v-model.trim="item.Is_Owner" placeholder="请选择是否是户主" filterable style="width: 100%">
              <el-option v-for="(item,index) in [{label:'是',value:'0'},{label:'否',value:'1'}]" :key="index"
                :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-descriptions-item> -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">居住状态</div>
              </template>
              <el-form-item :prop="'childDataForm.'+ index +'.Live_Status'" :rules="[{ required: true, message: '请选择居住状态', trigger: 'change' }]">
                <el-select clearable v-model.trim="item.Live_Status" placeholder="请选择居住状态" filterable style="width: 100%">
                  <el-option v-for="(item,index) in [{label:'居住',value:'0'},{label:'离开',value:'1'}]" :key="index"
                    :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">入住时间</div>
              </template>
              <el-form-item :prop="'childDataForm.'+ index +'.Entry_Date'" :rules="[{ required: true, message: '请选择日期', trigger: 'change' }]">
                <el-date-picker v-model="item.Entry_Date" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                  class="borderless-input" type="datetime" placeholder="请选择日期" size="large"></el-date-picker>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item v-if="item.Relation_Type_SerialNumber == 'RT0000000000011'">
              <template #label>
                <div class="cell-item">暂住证号</div>
              </template>
              <el-form-item :prop="'childDataForm.'+ index +'.Temporary_Residence_Number'" :rules="[{ required: true, message: '请输入暂住证号', trigger: 'blur' }]">
                <el-input v-model="item.Temporary_Residence_Number" class="borderless-input" placeholder="请输入暂住证号" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item v-if="item.Relation_Type_SerialNumber == 'RT0000000000011'">
              <template #label>
                <div class="cell-item">到期日期</div>
              </template>
              <el-form-item :prop="'childDataForm.'+ index +'.Expire_Date'"  :rules="[{ required: true, message: '请选择到期日期', trigger: 'change' }]">
                <el-date-picker v-model="item.Expire_Date" type="date" class="borderless-input"  placeholder="请选择到期日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" size="large" />
              </el-form-item> 
            </el-descriptions-item>
            <el-descriptions-item v-if="item.Relation_Type_SerialNumber == 'RT0000000000011'">
              <template #label>
                <div class="cell-item">暂住事由</div>
              </template>
              <el-form-item :prop="'childDataForm.'+ index +'.Temporary_Residence_Reason'" :rules="[{ required: true, message: '请输入暂住事由', trigger: 'blur' }]">
                <el-input v-model="item.Temporary_Residence_Reason" class="borderless-input" placeholder="请输入暂住事由" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item v-if="item.Relation_Type_SerialNumber == 'RT0000000000011'">
              <template #label>
                <div class="cell-item">常驻地址</div>
              </template>
              <el-form-item :prop="'childDataForm.'+ index +'.Residence_Address'">
                <el-input v-model="item.Residence_Address" class="borderless-input" placeholder="请输入常驻地址" />
              </el-form-item> 
            </el-descriptions-item>
            <el-descriptions-item v-if="item.Relation_Type_SerialNumber == 'RT0000000000011'">
              <template #label>
                <div class="cell-item">暂住证明</div>
              </template>
              <el-form-item :prop="'childDataForm.'+ index +'.Stay_Prove'">
                <yl-upload v-model="item.Stay_Prove"></yl-upload>
              </el-form-item> 
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
      </div>
    </div>
    <footer class="botton-ann">
      <el-button @click="goBack">返回</el-button>

      <el-button type="primary" plain @click="handleSubmit">提交</el-button>
    </footer>
  </div>
</body>
<script src="../../../utils/utils.js"></script>
<script src="../../../config/config.js"></script>
<script src="../../../utils/compressor.js"></script>
<script src="../../../utils/wangeditor.js"></script>
<script src="../../../utils/mixins.js"></script>
<script src="../../../yl/vue.js"></script>
<script src="../../../yl/index.js"></script>
<script src="../../../yl/zh-cn.mjs"></script>
<script src="../../../yl/index.iife.min.js"></script>
<script src="../../../yl/jquery.min.js"></script>
<script src="../../../utils/jquery.cookie.js"></script>
<script src="../../../yl/jquery.easyui.min.js"></script>
<script src="../../../yl/jquery.easyui.mobile.js"></script>
<script src="../../../yl/moment.min.js"></script>
<script src="../../../api/request.js"></script>
<script src="./js/add1.js"></script>

</html>